<template>
  <div class="CDView">
    <img
      :src="musicStore.fm ? musicStore.playList[0].album.blurPicUrl : musicStore.playList[musicStore.playIndx].al.picUrl"
      alt="" class="bigImg" />
    <div v-if="!musicStore.fm" class="CDheader">
      <div class="left">
        <SvgView ion="#icon-shanglajiantou" @click="musicStore.changePlayPop(false)" />
      </div>
      <div class="content">
        <h3>{{ musicStore.playList[musicStore.playIndx].name }}</h3>
        <span>
          {{
              musicStore.playList[musicStore.playIndx].ar
                .reduce((a, b) => {
                  return (a += b.name + "/");
                }, "")
                .slice(0, -1)
          }}</span>
      </div>
      <div class="right">
        <SvgView ion="#icon-13" />
      </div>
    </div>
    <div v-else class="FMheader">
      <div class="left">
        <SvgView ion="#icon-shanglajiantou" @click="musicStore.changePlayPop(false)" />
      </div>
      <div class="content">
        <h3>私人FM</h3>
      </div>
      <div class="right">
        <SvgView ion="#icon-gengduo-shuxiang" />
      </div>
    </div>
    <div class="CDcontent" v-if="!musicStore.lyric && !musicStore.fm" @click="lyric">
      <div class="imgs">
        <img src="../../assets/image/kd.png" class="cd1" alt="" />
        <img src="../../assets/image/dp.png" class="cd2" alt="" />
        <img :src="musicStore.playList[musicStore.playIndx].al.picUrl" class="cd3"
          :class="musicStore.playReady ? 'img_running' : 'img_paused'" alt="" />
      </div>
      <div class="tabs">
        <SvgView ion="#icon-aixin" />
        <SvgView ion="#icon-iconfontzhizuobiaozhun023146" />
        <SvgView ion="#icon-13" />
        <SvgView ion="#icon-pinglun-" />
        <SvgView ion="#icon-gengduo-shuxiang" />
      </div>
    </div>
    <div class="FMcontent" v-else-if="!musicStore.lyric && musicStore.fm" @click="lyric">
      <img :src="musicStore.playList[0].album.picUrl" alt="">
      <p>{{ musicStore.playList[0].name }}</p>
      <span>{{ musicStore.playList[musicStore.playIndx].artists
          .reduce((a, b) => {
            return (a += b.name + ",");
          }, "").slice(0, -1)
      }}</span>
    </div>
    <div @click="lyric" v-else class="CDlyricBox">
      <div class="CDlyric" ref="lyricBox">
        <div v-for="(item, index) in musicStore.musicLyric" class="lyric" :class="{
          lyric_active:
            musicStore.currentTime * 1000 >= item.time &&
            musicStore.currentTime * 1000 < item.pre,
        }" ref="lyricRef" :key="index">
          {{ item.lyric }}
        </div>
      </div>
    </div>
    <div v-if="!musicStore.fm" class="CDbottom">
      <div class="progressBar">
        <input type="range" class="range" min="0" :max="musicStore.countTime" v-model="musicStore.currentTime"
          step="0.05" @change="changeTime($event)">
      </div>
      <div class="selectMusic">
        <SvgView ion="#icon-danquxunhuan" />
        <SvgView ion="#icon-shangyishoushangyige" @click="previous" />
        <SvgView :ion="musicStore.playReady ? '#icon-zanting' : '#icon-bofang'" @click="play" />
        <SvgView ion="#icon-xiayigexiayishou" @click="next('no')" />
        <SvgView ion="#icon-zu" />
      </div>
    </div>
    <div v-else class="FMbottom">
      <div class="progressBar">
        <input type="range" class="range" min="0" :max="musicStore.countTime" v-model="musicStore.currentTime"
          step="0.05" @change="changeTime($event)">
      </div>
      <div class="selectMusic">
        <SvgView ion="#icon-buxihuan" />
        <SvgView ion="#icon-aixin" />
        <SvgView :ion="musicStore.playReady ? '#icon-zanting' : '#icon-bofang'" @click="play" />
        <SvgView ion="#icon-xiayigexiayishou" @click="next('fm')" />
        <SvgView ion="#icon-pinglun-" />
      </div>
    </div>
  </div>
</template>

<script setup>
import SvgView from "@/components/SvgView.vue";
import { useMusicStore } from "@/store/store";
import { watch, ref } from "vue";
import { getFM } from '../../assets/axios/api'
import { useRouter } from "vue-router";
const router = useRouter();
const musicStore = useMusicStore();
const lyricRef = ref([]);
const lyricBox = ref();
const emit = defineEmits(['cgeTime'])
const play = () => {
  musicStore.changePlayReady();
};
const previous = () => {
  musicStore.changePlayIndex(-1);
};
const next = async (val) => {
  if (val === 'no') {
    musicStore.changePlayIndex(1);
  } else if (val === 'fm') {
    let res = await getFM()
    musicStore.changePlayList(res.data.data)
    musicStore.getMusicLyric()
    musicStore.changePlayReady(true)
  }

};
const lyric = () => {
  musicStore.changeLyric();
};
const changeTime = ($event) => {
  emit('cgeTime', $event.srcElement.value)
}
watch(
  () => musicStore.currentTime,
  () => {
    let a = lyricRef.value.filter((v) => {
      return v.className == "lyric lyric_active";
    });
    if (a[0]?.offsetTop && a[0].offsetTop > 250) {
      lyricBox.value.scrollTop = a[0].offsetTop - 250;
    }
  }
);
router.beforeEach((to, from, next) => {
  if (to.path !== from.path && musicStore.playPop) {
    musicStore.changePlayPop(false);
  } else {
    next()
  }
})
</script>

<style scoped lang="less">
.CDView {
  width: 100%;
  height: 100vh;
  position: relative;

  >img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    filter: blur(100px);
    z-index: -1;
  }

  .CDheader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    backdrop-filter: blur(10px) brightness(100%);

    .left,
    .right {
      margin: 0 10px;

      .icon {
        fill: white;
        width: 20px;
        height: 20px;
      }
    }

    .content {
      color: white;
      text-align: center;

      span {
        color: silver;
      }
    }
  }

  .CDcontent {
    height: 450px;

    .imgs {
      position: relative;
      height: 450px;

      .cd1 {
        position: absolute;
        left: 42%;
        width: 150px;
        top: 20px;
        z-index: 1;
      }

      .cd2 {
        position: absolute;
        width: 300px;
        height: 300px;
        top: 20%;
        left: 50%;
        margin-left: -150px;
      }

      .cd3 {
        position: absolute;
        width: 200px;
        height: 200px;
        border-radius: 50%;
        top: 20%;
        left: 50%;
        margin-top: 50px;
        margin-left: -100px;
        animation: changeright 6s linear infinite;
      }

      .img_running {
        animation-play-state: running;
      }

      .img_paused {
        animation-play-state: paused;
      }
    }

    .tabs {
      display: flex;
      align-items: center;
      justify-content: space-around;

      .icon {
        fill: white;
        width: 25px;
        height: 25px;
      }
    }
  }

  .CDlyricBox {
    width: 375px;
    overflow: hidden;

    .CDlyric {
      height: 450px;
      width: 383px;
      margin: 0 auto;
      overflow: scroll;
      text-align: center;

      >.lyric {
        padding: 8px 0;
        color: silver;
      }

      >.lyric_active {
        color: white;
        font-size: 20px;
        font-weight: bold;
      }
    }
  }

  .CDbottom {
    margin-top: 40px;

    .progressBar {
      .range {
        width: 100%;
        height: 0.06rem;
      }
    }

    .selectMusic {
      display: flex;
      justify-content: space-around;
      align-items: center;
      margin-top: 15px;

      .icon {
        fill: white;
        width: 20px;
        height: 20px;

        &:nth-child(3) {
          width: 45px;
          height: 45px;
        }
      }
    }
  }

  .FMheader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    backdrop-filter: blur(10px) brightness(100%);

    .left,
    .right {
      margin: 0 10px;

      .icon {
        fill: white;
        width: 20px;
        height: 20px;
      }
    }

    .content {
      color: white;
      text-align: center;

      span {
        color: silver;
      }
    }
  }

  .FMcontent {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 300px;
    height: 300px;
    margin-top: -60%;
    margin-left: -150px;

    >img {
      width: 300px;
      height: 300px;
    }

    >p {
      font-size: 20px;
      margin: 10px 0;
      text-align: center;
      color: white;
    }

    >span {
      text-align: center;
      display: block;
      font-size: 10px;
      color: white;
    }
  }

  .FMbottom {
    position: absolute;
    width: 100vw;
    bottom: 30px;

    .progressBar {
      .range {
        width: 100%;
        height: 0.06rem;
      }
    }

    .selectMusic {
      display: flex;
      justify-content: space-around;
      align-items: center;
      margin-top: 15px;

      .icon {
        fill: white;
        width: 20px;
        height: 20px;

        &:nth-child(3) {
          width: 45px;
          height: 45px;
        }
      }
    }
  }
}
</style>
